<template>
  <div
    class="more-actions-popup"
    v-if="visible"
    :style="{
      left: position.left + 'px',
      top: position.top + 'px',
    }"
    @click.stop
  >
    <div class="actions-menu">
      <div
        v-if="actions && actions.length > 0"
        v-for="action in actions"
        :key="action.key"
        class="action-item"
        @click="handleAction(action)"
      >
        <div class="action-item-content">
          <span class="label-left" :style="{ color: action.fromNode.color }">{{
            language ? action.fromNode.name.zh_CN : action.fromNode.name.en_US
          }}</span>
          <div class="operation-container">
            <span class="operation-text">{{
              (language ? action.name.zh_CN : action.name.en_US) || ""
            }}</span>
            <div class="arrow-center-line">
              <div class="arrow-icon" v-html="arrowIcon"></div>
            </div>
          </div>
          <span class="label-right" :style="{ color: action.toNode.color }">{{
            language ? action.toNode.name.zh_CN : action.toNode.name.en_US
          }}</span>
        </div>
      </div>
      <div v-else style="text-align: center"><span>暂无数据</span></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  // 定义操作项类型
  import { computed, onMounted, onUnmounted, ref } from "vue";
  import { longRightArrowIcon } from "@/utils/SvgIcons.ts";

  // 定义props
  interface MoreActionsPopupProps {
    visible: boolean;
    position: { left: number; top: number };
    actions: Record<string, any>[];
  }
  const props = defineProps<MoreActionsPopupProps>();
  const language = ref("true");
  // 定义emits
  const emit = defineEmits<{
    close: [visible: boolean];
    action: [actionKey: string];
  }>();
  const arrowIcon = computed(() => {
    let textLength = 0;
    for (let i = 0; i < props.actions.length; i++) {
      const action = props.actions[i].operation?.length || 0;
      if (action > textLength) {
        textLength = action;
      }
    }
    const arrowLength = 50 + textLength * 9;
    return longRightArrowIcon(arrowLength);
  });
  const handleClickOutside = (event: MouseEvent) => {
    if (props.visible) {
      const popup = document.querySelector(".more-actions-popup");
      if (popup && !popup.contains(event.target as Node)) {
        emit("close", false);
      }
    }
  };

  // 处理操作点击
  const handleAction = (action: any) => {
    console.log("handleActio111n", action);
    emit("action", action);
    emit("close", false);
  };

  onMounted(() => {
    document.addEventListener("click", handleClickOutside);
  });

  onUnmounted(() => {
    document.removeEventListener("click", handleClickOutside);
  });
</script>

<style scoped lang="scss">
  $primary-color: #1890ff;
  $success-color: #52c41a;
  $warning-color: #fa8c16;
  $danger-color: #ff4d4f;
  $text-color: #42464e;
  $light-text: rgba(0, 0, 0, 0.5);
  $border-color: #e0e0e0;
  $background-color: #f8f9fa;
  $hover-bg: #e6f7ff;

  .more-actions-popup {
    position: fixed;
    z-index: 1000;
    pointer-events: auto;
  }

  .actions-menu {
    min-width: 120px;
    background: #fff;
    border: 1px solid #dee0e3;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    font-size: 12px;
    padding: 8px 0;
  }

  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .action-item-content {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    justify-content: space-between;
  }
  .action-item-content:hover,
  .action-item-content.active {
    background-color: rgba(31, 35, 41, 0.1);
  }
  .label-left,
  .label-right {
    width: 40px;
    height: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .operation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1; /* 占据中间可用空间 */
  }

  .operation-text {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    color: #2ba471;
    min-height: 15px;
    transform: translate(-2px, -6px);
  }

  .arrow-center-line {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 让箭头占满中间空间 */
    position: relative;
    transform: translateY(-5px);
  }

  .arrow-icon {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 让箭头中心点居中 */
  }
</style>
